<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <user-tab-list :list="tablist"></user-tab-list>
      <div class="filter-line b-b-d flx-row-s-c">
        <span class="item-name">委托日期</span>
        <DatePicker
          :editable="false"
          type="daterange"
          split-panels
          placeholder="请选择"
          style="width: 300px"
          :value="startTime"
          @on-change="dateChange"
        ></DatePicker>
        <span class="item-name pub-m-l-40">状态</span>
        <Select v-model="status" style="width: 150px">
          <Option
            v-for="item in statusList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </div>
      <div class="filter-line flx-row-s-c">
        <div
          class="user-strong-button line-button-size"
          style="margin: 0 24px 0 0"
          @click="searchEvent"
        >
          搜索
        </div>
        <div class="user-normal-button line-button-size" @click="reset">
          重置
        </div>
      </div>
    </div>

    <div class="user-main-box pub-m-t-20">
      <div class="filter-line search-result-line flx-row-bw-c">
        <span class="c-g f-14"
          >搜索结果共<span class="c-black"> {{ total }} </span>条</span
        >
      </div>
      <div style="position: relative">
        <Spin v-if="loading" :with-icon="true"></Spin>
        <table class="table-area">
          <thead>
            <tr>
              <th><div class="line-style">序号</div></th>
              <th><div class="line-style">代购域名</div></th>
              <th><div class="line-style">最高预算（元）</div></th>
              <th><div class="line-style">留言</div></th>
              <th><div class="line-style">委托日期</div></th>
              <th><div class="line-style">状态</div></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in list" :key="index">
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ (index + 1) * limit }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f f-ell-sin">{{ item.domainName }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.prePrice }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span v-if="item.description" class="normal-f f-ell-sin">{{
                    item.description
                  }}</span>
                  <span
                    v-if="item.description"
                    class="b-form-font-button"
                    @click="checkReason(item.description)"
                    >详情</span
                  >
                  <span v-else class="normal-f f-ell-sin">--</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.publishTime }}</span>
                </div>
              </td>
              <td>
                <div class="line-style normal-f">
                  {{ item.status | status }}
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <Empty-State
          v-if="total != null && total == 0"
          content="未搜索到任何内容！"
        ></Empty-State>
        <div class="form-page-bottom-area flx-row-c-c">
          <Page
            :total="total"
            :current="page"
            :page-size="limit"
            :page-size-opts="pageSizeOpts"
            show-elevator
            show-sizer
            show-total
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getEntrustList } from "@/api/bidding";
import { mapGetters } from "vuex";

export default {
  name: "VipReminder",
  filters: {
    status(val) {
      let label = "--";
      switch (val) {
        case 2:
          label = "待分配";
          break;
        case 3:
          label = "处理中";
          break;
        case 4:
          label = "已拒绝";
          break;
        case 5:
          label = "待⽀付";
          break;
        case 6:
          label = "已关闭";
          break;
        case 7:
          label = "已⽀付";
          break;
        case 8:
          label = "待生产";
          break;
        case 9:
          label = "已完成";
          break;
      }
      return label;
    },
  },

  data() {
    return {
      breadCrumb: [{ name: "域名经纪" }, { name: "我的代购记录" }],
      tablist: [
        {
          name: "域名委托代购记录",
          to: "/user/Purchasing",
        },
      ],
      statusList: [
        {
          value: 2,
          label: "待分配",
        },
        {
          value: 3,
          label: "处理中",
        },
        {
          value: 4,
          label: "已拒绝",
        },
        {
          value: 5,
          label: "待⽀付",
        },
        {
          value: 6,
          label: "已关闭 ",
        },
        {
          value: 7,
          label: "已⽀付",
        },
        {
          value: 8,
          label: "待生产",
        },
        {
          value: 9,
          label: "已完成",
        },
      ],
      loading: false,
      status: null,
      domainName: "",
      endTime: "",
      startTime: "",
      page: 1,
      limit: 10,
      // 分页设置
      total: 0,
      pageSizeOpts: [50, 100, 200],
      list: [],
    };
  },
  head() {
    return {
      title: this.defaultTdk.title,
      meta: [
        { name: "keywords", content: this.defaultTdk.keywords },
        { name: "description", content: this.defaultTdk.description },
      ],
    };
  },
  computed: {
    ...mapGetters({ defaultTdk: "getDefaultTdk" }),
  },
  mounted() {
    this.getEntrustList();
  },
  methods: {
    // 查看备注
    checkReason(description) {
      this.$Modal.warning({
        title: "查看备注",
        content: `<p>${description || "-"}</p>`,
      });
    },
    // 搜索
    searchEvent() {
      this.page = 1;
      this.getEntrustList();
    },
    reset() {
      this.page = 1;
      this.startTime = "";
      this.endTime = "";
      this.domainName = "";
      this.status = null;
      this.getEntrustList();
    },
    // 获取列表
    async getEntrustList() {
      this.loading = true;
      const params = {
        startTime: this.startTime,
        endTime: this.endTime,
        domainName: this.domainName,
        limit: this.limit,
        page: this.page,
      };
      if (this.status > 0) {
        params.status = this.status;
      }
      const res = await getEntrustList(params);
      if (res.code === 200) {
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },
    // 日期选择改变
    dateChange(date) {
      this.startTime = date[0];
      this.endTime = date[1];
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getEntrustList();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.limit = pageSize;
      this.pageChange(1);
    },
  },
};
</script>

<style lang="scss" scoped></style>
